<template>
  <div>
    <div class="card content-box">
      <span class="text">{{ parentProps.batchName }}任务详情</span>
      <el-divider></el-divider>
      <div style="width: 100%; display: flex; justify-content: start">
        <el-button type="danger" style="font-size: 20px; padding: 0 6px" :icon="Back" @click="turnBack"></el-button>
      </div>
      <br />
      <!--展示机构列表-->
      <el-table
        :data="paginatedTaskList"
        border
        class="custom-table"
        style="width: 100%"
        :default-sort="{ prop: 'inspectionWork.inspectionStartTime', order: 'descending' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="100" type="index"> </el-table-column>
        <el-table-column prop="inspectionWork.inspectionStartTime" label="开始时间" sortable>
          <template #default="scope">
            <text>{{ formatDate(scope.row.inspectionWork.inspectionStartTime) }}</text>
          </template>
        </el-table-column>
        <el-table-column label="任务名称">
          <template #default="scope">
            <text>{{ scope.row.inspectionWork.inspectionWorkName }}</text>
          </template>
        </el-table-column>
        <el-table-column label="任务模板">
          <template #default="scope">
            <text>{{ scope.row.inspection.inspectionName }}</text>
          </template>
        </el-table-column>
        <el-table-column label="路线">
          <template #default="scope">
            <text>{{ scope.row.map.mapName }}</text>
          </template>
        </el-table-column>
        <el-table-column label="创建者">
          <template #default="scope">
            <text>{{ getUserInfo(scope.row.inspection.inspectionUserId) }}</text>
          </template>
        </el-table-column>
        <el-table-column label="任务状态">
          <template #default="scope">
            <el-tag :type="formatInspectionWorkTagType(scope.row.inspectionWork.inspectionWorkStatus)" size="large">
              {{ formatInspectionWorkStatus(scope.row.inspectionWork.inspectionWorkStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <!--#default="{ row }"-->
          <template #default="{ row }">
            <el-button type="primary" @click="showTask(row)" size="small">查看</el-button>
            <el-button type="warning" @click="showEditTask(row)" size="small">编辑</el-button>
            <el-button type="danger" @click="delTask(row)" size="small">删除</el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无任务" />
        </template>
      </el-table>
      <br />
      <!--分页-->
      <div style="width: 100%; display: flex; justify-content: end">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :pager-count="7"
          layout="jumper, prev, pager, next, total"
          :total="totalItems"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-drawer v-model="show_task" size="35%">
      <div>
        <!--任务信息-->
        <el-card style="max-width: 100%">
          <template #header>任务：{{ task.inspectionWork.inspectionWorkName }}</template>
          <div class="common-layout">
            <el-container>
              <el-main>
                <el-descriptions title="" :column="1" border>
                  <el-descriptions-item label="任务名称" align="center">
                    {{ task.inspectionWork.inspectionWorkName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="巡检线路" align="center">
                    {{ task.map.mapName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="创建者" align="center">
                    {{ getUserInfo(task.inspection.inspectionUserId) }}
                  </el-descriptions-item>
                  <el-descriptions-item label="任务时限" align="center">
                    <span>{{ task.inspectionWork.inspectionLimitTime }}小时</span>
                  </el-descriptions-item>
                  <el-descriptions-item label="任务状态" align="center">
                    <el-tag :type="formatInspectionWorkTagType(task.inspectionWork.inspectionWorkStatus)" size="large">
                      {{ formatInspectionWorkStatus(task.inspectionWork.inspectionWorkStatus) }}
                    </el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="任务开始时间" align="center">
                    <span>{{ formatDate(task.inspectionWork.inspectionStartTime) }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item v-if="task.inspectionWork.inspectionWorkStatus === 2" label="任务完成时间" align="center">
                    <span>{{ formatDate(task.inspectionWork.inspectionEndTime) }}</span>
                  </el-descriptions-item>
                </el-descriptions>
              </el-main>
            </el-container>
          </div>
        </el-card>
        <br />
        <br />
        <el-card>
          <template #header>
            <span>任务点位详情</span>
          </template>
          <el-table :data="taskDetails" class="custom-table" style="width: 100%" border>
            <el-table-column type="expand">
              <template #default="props">
                <el-descriptions :column="1" border size="small">
                  <el-descriptions-item label="点位名称" align="center" label-class-name="my-label">
                    {{ props.row.mapDetailDesc }}
                  </el-descriptions-item>
                  <el-descriptions-item label="点位任务名称" align="center" label-class-name="my-label">
                    {{ props.row.inspectionDataName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="点位任务描述" align="center" label-class-name="my-label">
                    {{ props.row.inspectionDataDesc }}
                  </el-descriptions-item>
                  <el-descriptions-item label="点位任务描述" align="center" label-class-name="my-label">
                    {{ props.row.unitName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="执行班组" align="center" label-class-name="my-label">
                    {{ getClassInfo(props.row.inspectionDetailClassId) }}
                  </el-descriptions-item>
                  <el-descriptions-item label="负责人" align="center" label-class-name="my-label">
                    {{ getUserInfo(props.row.inspectionDetailUserId) }}
                  </el-descriptions-item>
                  <el-descriptions-item label="备注" align="center" label-class-name="my-label">
                    {{ props.row.inspectionDetailNote ? props.row.inspectionDetailNote : "无" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="巡检数据" align="center" label-class-name="my-label">
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="showValue(props.row)"
                      v-if="props.row.inspectionValueVos.length >= 1"
                    >
                      查看
                    </el-button>
                    <span v-else>暂无</span>
                  </el-descriptions-item>
                </el-descriptions>
              </template>
            </el-table-column>
            <el-table-column label="序号" type="index"> </el-table-column>
            <el-table-column label="任务ID" prop="inspectionDetailId"></el-table-column>
            <el-table-column label="点位名称" prop="mapDetailDesc"></el-table-column>
            <el-table-column label="点位任务名称" prop="inspectionDataName"></el-table-column>
            <el-table-column label="任务状态">
              <template #default="scope">
                <el-tag :type="formatInspectionDetailTagType(scope.row.inspectionDetailStatus)" size="large">
                  {{ formatInspectionDetailStatus(scope.row.inspectionDetailStatus) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>

      <div></div>
    </el-drawer>

    <inspectionValue v-model:dialogFlag="showValueDetail" :inspection-values="inspectionValues"></inspectionValue>

    <el-drawer v-model="edit_task" title="编辑任务信息" size="35%">
      <div>
        <!--任务信息-->
        <el-card style="max-width: 100%">
          <template #header>
            <div style="display: flex; justify-content: space-between; width: 100%; align-items: center">
              <span>{{ editForm.OldInspectionWorkName }}</span>
              <el-button link @click="confirmEdit" type="danger" size="large">修改</el-button>
            </div>
          </template>
          <el-form v-model="editForm" label-position="right" style="margin-left: 10%">
            <el-form-item label="任务名称" prop="inspectionWorkName">
              <el-input v-model="editForm.inspectionWorkName" style="width: 60%"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="inspectionStartTime">
              <el-date-picker
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                time-format="HH:mm"
                v-model="editForm.inspectionStartTime"
                placeholder="开始时间"
                :arrow-control="true"
                :suffix-icon="Calendar"
                :default-time="now"
                :disabled-date="disabledDate"
                :disabled-hours="disabledHours"
                :disabled-minutes="disabledMinutes"
                style="width: 60%"
                :show-now="false"
              />
            </el-form-item>
            <el-form-item label="任务时限" prop="inspectionLimitTime">
              <el-input v-model="editForm.inspectionLimitTime" style="width: 20%"></el-input>
              <span>&nbsp;小时</span>
            </el-form-item>
          </el-form>
        </el-card>
        <br />
        <br />
        <el-card>
          <template #header>
            <div style="display: flex; justify-content: space-between; width: 100%; align-items: center">
              <span>任务点位详情</span>
              <el-button link @click="showEditDetail" type="primary" size="large">编辑</el-button>
            </div>
          </template>
          <el-table :data="editDetails" class="custom-table" style="width: 100%" border>
            <el-table-column label="序号" type="index"> </el-table-column>
            <el-table-column label="点位名称" prop="mapDetailDesc"></el-table-column>
            <el-table-column label="点位任务名" prop="inspectionDataName"></el-table-column>
            <el-table-column label="任务描述" prop="inspectionDataDesc"></el-table-column>
            <el-table-column label="班组">
              <template #default="{ row }">
                {{ getClassInfo(row.inspectionDetailClass) }}
              </template>
            </el-table-column>
            <el-table-column label="负责人">
              <template #default="{ row }">
                {{ getUserInfo(row.inspectionDetailUser) }}
              </template>
            </el-table-column>
          </el-table>
          <br />
        </el-card>
      </div>
    </el-drawer>

    <el-dialog v-model="edit_details_dialog" title="点位信息编辑" width="70%">
      <div>
        <el-table :data="editDetails2" style="width: 100%" border>
          <el-table-column prop="mapDetailDesc" label="点位名"></el-table-column>
          <el-table-column prop="inspectionDataName" label="点位任务名称">
            <template #default="scope">
              <el-input v-model="scope.row.inspectionDataName" placeholder="点位任务名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionDataDesc" label="任务描述">
            <template #default="scope">
              <el-input v-model="scope.row.inspectionDataDesc" placeholder="点位任务描述"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionGroupId" label="数据组">
            <template #default="scope">
              <el-select v-model="scope.row.inspectionGroupId" placeholder="选择数据组">
                <el-option
                  v-for="item in datas"
                  :key="item.inspectionGroupId"
                  :label="item.inspectionGroupName"
                  :value="item.inspectionGroupId"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="执行班组">
            <template #default="scope">
              <el-select
                v-model="scope.row.inspectionDetailClass"
                placeholder="选择班组"
                @change="scope.row.inspectionDetailUser = null"
              >
                <el-option
                  v-for="clas in workerListByClass"
                  :key="clas.classId"
                  :label="clas.className"
                  :value="clas.classId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="负责人">
            <template #default="scope">
              <el-select
                v-model="scope.row.inspectionDetailUser"
                placeholder="选择组员"
                :disabled="!scope.row.inspectionDetailClass"
              >
                <el-option
                  v-for="item in getWorkerList(scope.row.inspectionDetailClass)"
                  :key="item.userId"
                  :label="item.realName"
                  :value="item.userId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="ConfirmEditDetail"> 确认修改 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="js">
import { onMounted, reactive, ref, watch } from "vue";
import request from "@/api/request.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/stores/modules/user.ts";
import { Back, Calendar } from "@element-plus/icons-vue";
import http from "@/utils/http.js";
import inspectionValue from "@/views/inspect/dataGroup/inspectionValue/index.vue";

const showValueDetail = ref(false);
const inspectionValues = ref([]);
const currentUserId = useUserStore().userInfo.userId;
const emit = defineEmits(["turnBack"]);
const parentProps = defineProps({
  batchId: {
    type: Number,
    required: true
  },
  batchName: {
    type: String,
    required: true
  }
});
const now = new Date();
now.setSeconds(0); //设定开始时间秒数为0
const disabledDate = time => {
  // 禁用今天之前的日期
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return time.getTime() < today.getTime();
};
const disabledHours = () => {
  const hours = [];
  if (taskForm.value.inspectionStartTime) {
    const selectedDate = new Date(taskForm.value.inspectionStartTime);
    if (selectedDate.toDateString() === now.toDateString()) {
      const currentHour = now.getHours();
      for (let i = 0; i < currentHour; i++) {
        hours.push(i);
      }
    }
  }
  return hours;
};
const disabledMinutes = hour => {
  const minutes = [];
  if (taskForm.value.inspectionStartTime) {
    const selectedDate = new Date(taskForm.value.inspectionStartTime);
    if (selectedDate.toDateString() === now.toDateString() && hour === now.getHours()) {
      const currentMinute = now.getMinutes();
      for (let i = 0; i < currentMinute; i++) {
        minutes.push(i);
      }
    }
  }
  return minutes;
};

watch(
  () => parentProps.batchId, // 监听目标
  async newBatchId => {
    await fetchTaskList(newBatchId);
    updatePage();
  },
  { immediate: false } // 如果希望初始化时也触发一次监听，可以加上这个选项)
);
const show_task = ref(false);
const task = ref({});
const taskDetails = ref([]);

const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0);
const taskList = ref([]);
const paginatedTaskList = ref([]);
const workerListByClass = ref([]);

//编辑表单
const editForm = ref({});
const editDetails = ref([]);
const editDetails2 = ref([]);
const edit_task = ref(false);
const edit_details_dialog = ref(false);

// const AllMap = ref([]);

onMounted(async () => {
  console.log(parentProps.batchId, parentProps.batchName);
  await fetchTaskList();
  updatePage();
  await getWorkerByClass();
});
const showValue = row => {
  showValueDetail.value = true;
  inspectionValues.value = row.inspectionValueVos;
};
//获取班组及成员
const getWorkerByClass = async () => {
  await request.get("/api-self/users/account/selectByClass").then(res => {
    const data = res.data;
    if (data.code === 0) {
      workerListByClass.value = data.data;
    }
  });
};
const getWorkerList = classId => {
  const clas = workerListByClass.value.find(x => x.classId === classId);
  let workerList;
  if (clas) {
    workerList = clas.workerList;
  } else {
    workerList = [];
  }
  return workerList;
};
//任务信息编辑
const showEditTask = async row => {
  editForm.value.inspectionWorkId = row.inspectionWork.inspectionWorkId;
  editForm.value.OldInspectionWorkName = row.inspectionWork.inspectionWorkName;
  editForm.value.inspectionWorkName = row.inspectionWork.inspectionWorkName;
  editForm.value.inspectionStartTime = formatDate2(row.inspectionWork.inspectionStartTime);
  editForm.value.inspectionLimitTime = row.inspectionWork.inspectionLimitTime;
  await pushDetailPointToEditDetails();
  edit_task.value = true;
};
const pushDetailPointToEditDetails = async () => {
  editDetails.value = [];
  await request.get("/api-self/inspection/detail/" + editForm.value.inspectionWorkId + "/" + currentUserId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      data.data.forEach(detail => {
        const newDetail = {};
        newDetail["inspectionDetailId"] = detail.inspectionDetailId;
        newDetail["inspectionDetailClass"] = detail.inspectionDetailClassId;
        newDetail["inspectionDetailUser"] = detail.inspectionDetailUserId;
        newDetail["inspectionDataName"] = detail.inspectionDataName;
        newDetail["inspectionDataDesc"] = detail.inspectionDataDesc;
        newDetail["mapDetailDesc"] = detail.mapDetailDesc;
        newDetail["inspectionGroupId"] = detail.inspectionGroupId;
        editDetails.value.push(newDetail);
      });
    } else {
      ElMessage.error("获取巡检任务详情失败：" + data.message);
    }
  });
};
const confirmEdit = () => {
  let flag = false;
  for (const key in editForm.value) {
    if (!editForm.value[key]) flag = true;
  }
  if (flag) {
    ElMessage.warning("请填写完整信息");
    return;
  }
  ElMessageBox.confirm("确定修改吗?", "警告", {
    confirmButtonText: "修改",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    request.put("/api-self/inspection/inspectionWork", editForm.value).then(async res => {
      const data = res.data;
      if (data.code === 0) {
        await fetchTaskList();
        updatePage();
        ElMessage.success("修改成功");
      } else {
        ElMessage.error("修改失败：" + data.message);
      }
    });
  });
};
const showEditDetail = () => {
  edit_details_dialog.value = true;
  editDetails2.value = JSON.parse(JSON.stringify(editDetails.value));
};
const ConfirmEditDetail = () => {
  request.put("/api-self/inspection/details", { newDetails: editDetails2.value }).then(res => {
    const data = res.data;
    if (data.code === 0) {
      ElMessage.success("修改成功");
      pushDetailPointToEditDetails();
      edit_details_dialog.value = false;
    } else {
      ElMessage.error("修改失败：" + data.message);
    }
  });
};
//任务操作
const showTask = row => {
  show_task.value = true;
  task.value = taskList.value.find(task => task.inspectionWork.inspectionWorkId === row.inspectionWork.inspectionWorkId);
  getTaskDetails(task.value.inspectionWork.inspectionWorkId);
};
const delTask = async row => {
  ElMessageBox.confirm("确认删除该任务?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteTask(row.inspectionWork.inspectionWorkId);
  });
};
const deleteTask = inspectionWorkId => {
  request.delete("/api-self/inspection/" + inspectionWorkId).then(async res => {
    const data = res.data;
    if (data.code === 0) {
      ElMessage.success("删除成功");
      await fetchTaskList();
      updatePage();
    } else {
      ElMessage.error("删除失败：" + data.message);
    }
  });
};
//获取任务点位详情
const getTaskDetails = inspectionWorkId => {
  request.get("/api-self/inspection/detail/" + inspectionWorkId + "/" + currentUserId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      taskDetails.value = data.data;
    } else {
      ElMessage.error("获取巡检任务详情失败：" + data.message);
    }
  });
};
//获取批次内的任务列表
const fetchTaskList = async () => {
  await request.get("/api-self/inspection/" + currentUserId + "/" + parentProps.batchId).then(res => {
    const data = res.data;
    if (data.code === 0) {
      taskList.value = data.data;
      totalItems.value = taskList.value.length;
    } else {
      ElMessage.error("获取批次内任务详情失败：" + data.message);
    }
  });
};
//分页函数
const updatePage = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  paginatedTaskList.value = taskList.value.slice(start, end);
  console.log(paginatedTaskList.value);
};
const handleCurrentChange = newPage => {
  currentPage.value = newPage;
  updatePage(); // 更新当前页的数据
};
//格式化
const formatInspectionDetailStatus = status => {
  let statusStr = "未知状态";
  switch (status) {
    case 0:
      statusStr = "处理中";
      break;
    case 1:
      statusStr = "已超时";
      break;
    case 2:
      statusStr = "已完成";
      break;
    case 3:
      statusStr = "已取消";
      break;
    case 4:
      statusStr = "已反馈";
      break;
    case 5:
      statusStr = "未反馈";
      break;
    case 6:
      statusStr = "未开始";
      break;
  }
  return statusStr;
};
const formatInspectionDetailTagType = status => {
  let statusStr = "primary";
  switch (status) {
    case 0:
      statusStr = "primary";
      break;
    case 1:
      statusStr = "danger";
      break;
    case 2:
      statusStr = "success";
      break;
    case 3:
      statusStr = "warning";
      break;
    case 4:
      statusStr = "danger";
      break;
    case 5:
      statusStr = "info";
      break;
    case 6:
      statusStr = "info";
      break;
  }
  return statusStr;
};
const formatInspectionWorkStatus = status => {
  let statusStr = "未知状态";
  switch (status) {
    case 0:
      statusStr = "处理中";
      break;
    case 1:
      statusStr = "已超时";
      break;
    case 2:
      statusStr = "已完成";
      break;
    case 3:
      statusStr = "已取消";
      break;
    case 4:
      statusStr = "未开始";
      break;
  }
  return statusStr;
};
const formatInspectionWorkTagType = status => {
  let statusStr = "primary";
  switch (status) {
    case 0:
      statusStr = "primary";
      break;
    case 1:
      statusStr = "danger";
      break;
    case 2:
      statusStr = "success";
      break;
    case 3:
      statusStr = "warning";
      break;
    case 4:
      statusStr = "info";
      break;
  }
  return statusStr;
};
const formatDate = date => {
  const d = new Date(date);

  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");

  const hours = String(d.getHours()).padStart(2, "0");
  const minutes = String(d.getMinutes()).padStart(2, "0");
  const seconds = String(d.getSeconds()).padStart(2, "0");

  return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
};
const formatDate2 = dateString => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
// 创建一个响应式对象来存储用户信息
const userCache = reactive({});
const getUserInfo = userId => {
  // 检查缓存，避免重复请求
  if (!userCache[userId]) {
    // 初始设为 '加载中...'，以处理异步过程
    userCache[userId] = "加载中...";

    http
      .get("/users/account/getUserInfo", { params: { userId: userId } })
      .then(res => {
        const data = res.data;
        if (data.code === 0) {
          userCache[userId] = data.data.realName;
        } else {
          userCache[userId] = "未知用户";
        }
      })
      .catch(() => {
        userCache[userId] = "请求失败";
      });
  }
  // 立即返回缓存值，初次时可能是 "加载中..."
  return userCache[userId];
};
//查找指定班组名字
// 创建一个响应式对象来存储用户信息
const classCache = reactive({});
const getClassInfo = classId => {
  // 检查缓存，避免重复请求
  if (!classCache[classId]) {
    // 初始设为 '加载中...'，以处理异步过程
    classCache[classId] = "加载中...";
    http
      .get("/users/class/getClass/" + classId)
      .then(res => {
        const data = res.data;
        if (data.code === 0) {
          classCache[classId] = data.data.className;
        } else {
          classCache[classId] = "未知班组";
        }
      })
      .catch(() => {
        classCache[classId] = "请求失败";
      });
  }
  return classCache[classId];
};
//返回父页面
const turnBack = () => {
  emit("turnBack");
};
</script>
<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  font-size: 32px;
  font-weight: 600;
  color: #6b778c;
}
.demo-tabs {
  margin-top: -20px;
}
.topadd {
  position: absolute;
  top: 73px;
  right: 40px;
}
.page-container {
  box-sizing: border-box;
  min-height: 100%;
}
.add {
  position: absolute;
  top: 80%;
  right: 3%;
  float: left;
  width: 60px;
  height: 60px;
  font-size: 50px;
  font-weight: 600;
  border-radius: 50%;
}
.inneradd {
  position: absolute;
  top: 55px;
  right: 30px;
  float: left;
  font-weight: 900;
}
.avatar-uploader .avatar {
  display: block;
  width: 178px;
  height: 178px;
}
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #060707;
  text-align: center;
}
.Product-image {
  width: auto; /* 图片宽度自适应 */
  max-width: 100%; /* 图片最大宽度为其容器的100% */
  height: auto; /* 图片高度自适应 */
  max-height: 100%; /* 图片最大高度为其容器的100% */
}
.custom-table :deep(.el-table__header-wrapper thead tr th) {
  color: #000000;
  text-align: center;
  background-color: #fafafa;
}
.custom-table :deep(.el-table__body-wrapper tbody tr td) {
  text-align: center; /* 单元格内容居中 */
}
.el-button {
  border-radius: 6px;
}
:deep(.my-label) {
  width: 100px !important;
}
</style>
